<app-header></app-header>

<bit-container>
  <p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p>
  <div *ngIf="!hasLoaded && loading">
    <i
      class="bwi bwi-spinner bwi-spin tw-text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  </div>
  <div class="tw-mt-4" *ngIf="hasLoaded">
    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
      {{ "noUnsecuredWebsites" | i18n }}
    </bit-callout>
    <ng-container *ngIf="ciphers.length">
      <bit-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
        {{ "unsecuredWebsitesFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
      </bit-callout>

      <bit-toggle-group
        *ngIf="showFilterToggle && !isAdminConsoleActive"
        [selected]="filterOrgStatus$ | async"
        (selectedChange)="filterOrgToggle($event)"
        [attr.aria-label]="'addAccessFilter' | i18n"
      >
        <ng-container *ngFor="let status of filterStatus">
          <bit-toggle [value]="status">
            {{ getName(status) }}
            <span bitBadge variant="info"> {{ getCount(status) }} </span>
          </bit-toggle>
        </ng-container>
      </bit-toggle-group>
      <bit-table [dataSource]="dataSource">
        <ng-container header *ngIf="!isAdminConsoleActive">
          <tr bitRow>
            <th bitCell></th>
            <th bitCell>{{ "name" | i18n }}</th>
            <th bitCell>{{ "owner" | i18n }}</th>
            <th bitCell></th>
          </tr>
        </ng-container>
        <ng-template body let-rows$>
          <tr bitRow *ngFor="let r of rows$ | async">
            <td bitCell>
              <app-vault-icon [cipher]="r"></app-vault-icon>
            </td>
            <td bitCell>
              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                <a
                  bitLink
                  href="#"
                  appStopClick
                  (click)="selectCipher(r)"
                  title="{{ 'editItemWithName' | i18n: r.name }}"
                  >{{ r.name }}</a
                >
              </ng-container>
              <ng-template #cantManage>
                <span>{{ r.name }}</span>
              </ng-template>
              <ng-container *ngIf="!organization && r.organizationId">
                <i
                  class="bwi bwi-collection-shared"
                  appStopProp
                  title="{{ 'shared' | i18n }}"
                  aria-hidden="true"
                ></i>
                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
              </ng-container>
              <ng-container *ngIf="r.hasAttachments">
                <i
                  class="bwi bwi-paperclip"
                  appStopProp
                  title="{{ 'attachments' | i18n }}"
                  aria-hidden="true"
                ></i>
                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
              </ng-container>
              <br />
              <small>{{ r.subTitle }}</small>
            </td>
            <td bitCell>
              <app-org-badge
                *ngIf="!organization"
                [disabled]="disabled"
                [organizationId]="r.organizationId"
                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                appStopProp
              >
              </app-org-badge>
            </td>
          </tr>
        </ng-template>
      </bit-table>
    </ng-container>
  </div>
</bit-container>
